<template>
  <div class="w-full h-screen">
    <div class="fixed top-0 right-0 z-10">
      <button
        @click="scaleAdd(0.2)"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        放大
      </button>
      <button
        @click="scaleAdd(-0.2)"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        缩小
      </button>
    </div>
    <div
      ref="scrollViewBox"
      @scroll="scrollView"
      class="scale-box w-full h-full flex items-center absolute overflow-auto bg-slate-400 flex-shrink-0 box-border"
    >
      <div
        ref="scaleContainer"
        :style="`transform:translateX(${x}px) scale(${scale})`"
        class="scale-container flex flex-shrink-0"
      >
        <div
          class="w-[100px] h-[100px] bg-black text-white flex items-center justify-center text-2xl mr-2 flex-shrink-0"
          v-for="i in 20"
          :key="i"
        >
          {{ i }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'Vue + Rspack',
      scale: 1,
      x: 0,
      flag: false,
      initScrollLeft: 0,
      currentDiffScroll: 0,
      oldScrollLeft: 0,
    };
  },
  methods: {
    scaleAdd(n) {
      this.scale += n;
      if (this.scale < 1) {
        this.scale = 1;
        return;
      }
      // temp1.scrollLeft = (temp1.offsetWidth)/2*0.8 + (506+222+360) + (506+222+360)*0.8
      const left =
        (this.$refs.scrollViewBox.offsetWidth / 2) * (this.scale - 1);
      const sourceLeft =
        this.initScrollLeft +
        this.getOldDif(this.currentDiffScroll, n > 0 ? true : false);
      this.oldScrollLeft = Math.floor(
        left + sourceLeft + sourceLeft * (this.scale - 1),
      );
      this.currentDiffScroll = 0;
      this.flag = true;
      this.initScrollLeft = sourceLeft;
      requestAnimationFrame(() => {
        this.$refs.scrollViewBox.scrollLeft = this.oldScrollLeft;
        this.flag = false;
      });
    },
    getOldDif(currentDiffScroll, diff) {
      console.log(diff);
      const originDiff =
        currentDiffScroll / (1 + 1 * (this.scale - 1 - (diff ? 0.2 : -0.2)));
      console.log(originDiff, 'originDiff');
      return originDiff;
    },
    scrollView() {
      if (this.flag) {
        return;
      }
      if (this.scale == 1) {
        this.initScrollLeft = this.$refs.scrollViewBox.scrollLeft;
        console.log('initScrollLeft', this.initScrollLeft);
      } else {
        this.currentDiffScroll =
          this.$refs.scrollViewBox.scrollLeft - this.oldScrollLeft;
      }
    },
  },
  mounted() {
    hotkeys('f5', (event, handler) => {
      event.preventDefault();
      alert('you pressed F5!');
    });
  },
};
</script>

<style lang="scss" scoped>
.scale-container {
  transform-origin: center left;
}
.scale-box {
  &::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    position: fixed;
    left: 50%;
    // transform: translateX(-100%);
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
